﻿@page "/InputFile"

@using FluentUI.Demo.Shared.Pages.InputFile.Examples

<PageTitle>@App.PageTitle("InputFile")</PageTitle>

<h1>InputFile</h1>

<p>The <code>FluentInputFile</code> wraps the native Blazor <code>InputFile</code> component and extends it with drag/drop zone support. See the examples below for some different ways on how to use this component.</p>

<p>
    <b>Customization:</b> You can localize this component by customizing the content of <code>ChildContent</code>, but also the content of the progress area via the <code>ProgressTemplate</code> attribute.
    The default progress area displays <i>Loading</i>, <i>Completed</i> or <i>Canceled</i> labels via static variables <code>FluentInputFile.ResourceLoadingXXX</code>.
    These can be accessed to globally adapt the default display if you wish.
</p>

<blockquote>
    <b>note</b>: This component is not yet fully compatible with accessibility.
</blockquote>

<h2 id="example">Examples</h2>

<div>
    <DemoSection Title="Default" Component="@typeof(InputFileDefault)">
        <Description>
            <p>By default this component will use the <code>SaveToTemporaryFolder</code> mode which creates a local file.</p>

            <FluentMessageBar Title="Warning:" Intent="@MessageIntent.Warning" AllowDismiss="false" FadeIn="false">
                This might not always be possible depending on the user rights on the host. You may need to change the <code>InputFileMode</code> depending on your use case.
            </FluentMessageBar>

        </Description>
    </DemoSection>

    <DemoSection Title="Manual upload" Component="@typeof(InputFileByCode)">
        <Description>

        </Description>
    </DemoSection>

    <DemoSection Title="Manual upload with loading indicator" Component="@typeof(InputFileLoading)">
        <Description>

        </Description>
    </DemoSection>

    <DemoSection Title="Mode = InputFileMode.Buffer" Component="@typeof(InputFileBufferMode)">
        <Description>
            <p>Using the <code>Buffer</code> mode will load the entire file into memory during uploading.</p>

            <p>This mode is recommended when you cannot store local files and you are working with small files and have enough memory available.</p>

        </Description>
    </DemoSection>

    <DemoSection Title="Mode = InputFileMode.Stream" Component="@typeof(InputFileStream)">
        <Description>
            <p>The <code>Stream</code> mode gives you more control of the uploading process to save memory. In order for it to work you will need to implement the handling for the stream on your own.</p>

            <p>This mode is recommended when you want to upload large files which you do not want to hold entirely in memory.</p>

            <FluentMessageBar Title="Warning:" Intent="@MessageIntent.Warning" AllowDismiss="false" FadeIn="false">
                Remember to always dispose each stream to prevent memory leaks!
            </FluentMessageBar>
        </Description>
    </DemoSection>

    <DemoSection Title="Disabled Component" Component="@typeof(InputFileDisabled)">
        <Description>

        </Description>
    </DemoSection>
</div>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentInputFile)" />

<h3>Known Issues</h3>
<p>
    Starting with .NET 6, the <code>InputFile</code> component does not work in Server-Side Blazor applications using Autofac IoC containers. This issue is being tracked here: <a href="https://github.com/dotnet/aspnetcore/issues/38842" target="_blank" rel="noopener noreferrer">aspnetcore#38842</a>
    <br />
    <br />
    Enable HubOptions <a href="https://learn.microsoft.com/en-us/dotnet/api/Microsoft.AspNetCore.SignalR.HubOptions.DisableImplicitFromServicesParameters" target="_blank" rel="noopener noreferrer">DisableImplicitFromServicesParameters</a> in program/startup to workaround this issue.
</p>
<CodeSnippet>
    builder.Services
        .AddServerSideBlazor()
        .AddHubOptions(opt =>
        {
            opt.DisableImplicitFromServicesParameters = true;
        });
</CodeSnippet>
